<template>
  <el-container>
    <el-aside width="180px">
      <div class="cloud-dye-logo">
        <div class="title">精印细染</div>
      </div>

      <div>
        <el-scrollbar>
          <el-menu
            ref="homeElMenuRef"
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="#fff"
            style="width: 181px"
            @select="goUrl"
           
            
          >
            <el-sub-menu
              :index="menu.menuId + ''"
              v-for="menu in menuList"
              :key="menu.menuId"
            >
              <template #title>
                <el-icon><folder /></el-icon>
                <span>{{ menu.menuName }}</span>
              </template>

              <el-menu-item
                :index="sub.menuUrl"
                v-for="sub in menu.subMenuList"
                :key="sub.menuId"
                >{{ sub.menuName }}</el-menu-item
              >
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </div>
    </el-aside>
    <el-container>
      <el-header>
        <div
          style="
            line-height: 50px;
            color: #409eff;
            font-weight: bold;
            font-size: 24px;
            letter-spacing: 2px;
          "
        >
          云染数据生产过程信息系统
        </div>
        <div style="position: absolute; bottom: 10px; right: 10px">
          <span style="vertical-align: middle"
            >当前用户：{{
              `${currentUser.userId}【${currentUser.userName}】`
            }}</span
          >
          &nbsp;
          <el-link @click="quit" :icon="CircleClose">&nbsp;退出系统</el-link>
        </div>
      </el-header>
      <el-main>
        <el-card ref="homeElCardRef"
          style="flex:auto;display:flex;flex-direction:column;"
          :body-style="homeElCardBodyStyle"
        >
          <template #header>
            <el-breadcrumb separator="/">
              <template v-if="$route.meta.sub">
                <el-breadcrumb-item :to="{ path: '/' }"
                  >主页</el-breadcrumb-item
                >
                <el-breadcrumb-item
                  >{{ typeof($route.meta.navName) == 'function'?$route.meta.navName($route.params.info_type):$route.meta.navName }}</el-breadcrumb-item
                >
              </template>
              <el-breadcrumb-item v-else :to="{ path: '/' }"
                >主页</el-breadcrumb-item
              >
            </el-breadcrumb>
          </template>
          
            <router-view></router-view>
          
        </el-card>
      </el-main>
      <el-footer>
        版权所有&nbsp;&copy;2000-2022&nbsp; 冰雪墩融软件开发有限公司
      </el-footer>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref,onMounted } from "vue";
import { useRouter } from "vue-router";
import { tip, get, post, del, removeLocalToken,ddo } from "@/common";
import { Folder, FolderOpened, CircleClose } from "@element-plus/icons-vue";

const homeElCardRef = ref();



const homeElCardBodyStyle = {
  padding:'5px 10px 5px 10px',
  flex:'auto',  
  display:'flex',
  flexDirection:'column'
};

const homeElMenuRef = ref();



const router = useRouter();

//当前用户
const currentUser = ref({});
const getCurrentUser = () => {
  get("/security/home/curr-user").then((result) => {
    currentUser.value = result.data;
  });
};
getCurrentUser();

//菜单
const menuList = ref([]);
const getMenuList = () => {
  get("/security/home/menu-list").then((result) => {
    menuList.value = result.data;
  });
};
getMenuList();

const goUrl = (url) => {
  router.push({ path: url });
};



//退出
const quit = () => {
  del("/security/home/logout").then((result) => {
    tip.success("您已退出系统！");
    router.replace({ path: "/login" });
  });
};
</script>

<style scoped>
.el-container {
  margin-bottom: 40px;
  height: 100%;
  min-width: 1280px;
}
.el-header {
  position: relative;
  background-color: #ffffff;
  text-align: left;
  height: 50px;

  border-bottom: 1px solid #dcdfe6;
  padding-left: 5px;
}
.el-footer {
  background-color: #ffffff;
  text-align: center;
  height: 30px;
  line-height: 30px;
  border-top: 1px solid #dcdfe6;
}

.el-aside {
  background-color: #545c64;
  text-align: left;
}

.el-main {
  padding:5px;
  background-color: #ffffff;
  display:flex;flex-direction: column;
}

.cloud-dye-logo {
  box-sizing: border-box;
  margin-left: 25px;
  margin-top: 20px;
  margin-bottom: 30px;
  padding: 15px 15px 15px 22px;
  width: 120px;

  box-shadow: 0px 0px 10px 0px #a0cfff;
  text-shadow: 5px 5px 10px white;

  background-color: #a0cfff;
  color: #ffffff;

  font-weight: bold;
  text-align: center;
  font-size: 30px;
  letter-spacing: 10px;

  border-radius: 20px;
}

.el-aside .el-sub-menu .el-menu-item {
  min-width: 180px;
}
.x{
  
}
</style>